.root {
  width: 100%;
  min-width: 1200px;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.topView {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  .topViewLeft {
    display: flex;
    flex-direction: column;
    .view1, .view2, .view3 {
      position: relative;
      width: 360px;
      padding-bottom: 15px;
      // display: flex;
      // flex-direction: row;
      // justify-content: space-between;
      // padding: 20px;
      border-radius: 12px;
      box-shadow: 0 0 12px 0 rgba(0,0,0,0.06);
      background-color: white;
    }
    .view2, .view3 {
      margin-top: 10px;
      padding-top: 15px;
    }
    .view1 {
      .brandPanel {
        position: relative;
        padding: 8px 20px;
        // text-align: center;
        .brandList {
          width: 100%;
          height: 25px;
          font-size: 16px;
          line-height: 25px;
          color: #228cff;
          text-align: center;
        }
      }
      .warningPanel {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        .warningItem {
          flex: 1;
          display: flex;
          flex-direction: column;
          &:first-of-type {
            margin-right: 15px;
          }
          .warningTitle {
            position: relative;
            text-align: center;
            padding: 8px 20px 0 40px;
            font-weight: 700;
            &::before {
              position: absolute;
              content: '';
              width: 20px;
              height: 20px;
              left: 20px;
              // top: 0;
              background: url(@/assets/alarm_img.png) no-repeat center;
              background-size: cover;
            }
          }
          .warningNum {
            position: relative;
            padding: 4 40px 4 20px;
            text-align: center;
            .iconRightLine {
              right: 25px;
            }
          }
        }
      }
    }
    .view2, .view3 {
      /* .warningPanel {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
      } */
      .warningItem {
        display: flex;
        padding: 0 15px;
        flex: 1;
        flex-direction: column;
        .warningTitle {
          padding: 4px 0;
          font-weight: 700;
        }
        .warningNum {
          padding: 4px 0;
          text-indent: 2em;
          & > span {
            color: #228CFF;
          }
        }
      }
    }
  }
  .view3 {
    .warningItem { 
      margin-bottom: 10px;
    }
  }
  .topViewMid {
    width: 580px;
    height: 560px;
    .mapChina {
      width: 100%;
      height: 100%;
    }
  }

  .topViewRight {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 350px;
    height: 530px;
    padding: 15px;
    border-radius: 12px;
    box-shadow: 0 0 12px 0 rgba(0,0,0,0.06);
    background-color: white;
    .tableTile {
      width: 320px;
      position: relative;
      padding: 4px 10px 4px 15px;
      margin-bottom: 6px;
      &::before {
        position: absolute;
        content: '';
        width: 10px;
        height: 10px;
        top: 10px;
        left: 0;
        border-radius: 10px;
        background-color: #007EFE;
      }
    }
    :global {
      .ant-table.ant-table-small .ant-table-title, .ant-table.ant-table-small .ant-table-footer, .ant-table.ant-table-small .ant-table-thead > tr > th, .ant-table.ant-table-small .ant-table-tbody > tr > td, .ant-table.ant-table-small tfoot > tr > th, .ant-table.ant-table-small tfoot > tr > td {
        padding: 10px 8px;
      }
    }
  }

  .iconRightLine {
    position: absolute;
    top: 50%;
    right: 4px;
    transform: translateY(-50%);
    cursor: pointer;
  }
}

.midView {
  .chartBox {
    border-radius: 12px;
    box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.06);
    .chartHeader {
      position: relative;
      height: 32px;
      font-size: 15px;
      font-weight: 600;
      line-height: 20px;
      padding: 6px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      &.chartHeader2 {
        padding: 6px 140px 6px 6px;
      }
      .chartBtnList {
        position: absolute;
        height: 20px;
        right: 6px;
        top: 6px;
        text-align: right;
        font-size: 0;
        .chartBtn {
          display: inline-block;
          height: 20px;
          font-size: 13px;
          line-height: 20px;
          font-weight: 400;
          cursor: pointer;
          & + .chartBtn {
            margin-left: 4px;
          }
          &.chartBtnActive {
            color: #228CFF;
          }
        }
      }
    }
    .chartItem {
      width: 100%;
      height: 300px;
    }
  }
}

/* .midView {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding-bottom: 20px;
  .chartRow {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    flex-wrap: wrap;
    .chartItem {
      display: flex;
      // flex: 1;
      // min-width: 400px;
      width: 400px;
      height: 400px;
      position: relative;
      flex-direction: column;
      padding: 20px;
      margin-top: 20px;
      background-color: white;
      border-radius: 12px;
      box-shadow: 0 0 12px 0 rgba(0,0,0,0.06);
      .chartTitle {
        font-size: 16px;
        font-weight: 600;
      }
      .chartBox {
        width: 100%;
        height: 100%;
      }
    }
  }
} */
